<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/cw.css"/>
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
		<script src="../js/jquery-2.1.4.min.js"></script>
        <script src="../js/mui.min.js"></script>
        <script src="../js/global.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="../js/public.js" ></script>
        <script type="text/javascript" src="../js/app/shop-gouwu.js" ></script>
	</head>
           <style type="text/css">
           	 .mui-table-view .mui-media-object{max-width:60px;height: 60px;line-height: 60px;}
           
           body{font-size:15px;line-height: initial}
           .firstp{margin-top: 5px;}
           .mui-content>.mui-table-view:first-child{margin-top: 0;}
           .mui-table-view-cell>a:not(.mui-btn){padding-left:30px}
           .mui-input-row{overflow: initial}
           .mui-checkbox input[type=checkbox]{top:20px;z-index: 10;left: -9px !important;}
           .mui-checkbox input[type=checkbox]:before{font-size:17px;}
           .mui-checkbox input[type=checkbox]:checked:before{color:#8dc21f}
           .mui-table-view-cell:after{left: 0;}
           .mui-table-view-cell>a:not(.mui-btn).mui-active{background: none;}
           .first-p{font-size:13px !important;margin-top: 25px;color:#8dc21f}
           .mui-numbox [class*=btn-numbox]{width:30px;background: #DCDCDC;}
           .mui-numbox{width:100px;padding:0;height: 30px;position:absolute;right: 10px;bottom:10px}
           .boot-one{margin-bottom: 5px;}
           .mui-table-view:before,.mui-table-view:after{height: 0;}
           .bot-but{top:-8px !important;left: 10px;}
           .bot-two{margin-left: 25%;width:40%;display: inline-block;}
           .bot-two p{margin-bottom: 5px;color: #333333;}
           .quanx{width:20%;position:absolute;left: 11%;line-height: 44px;}
          .mui-bar .mui-btn{left:2px;top:0;width:33%;height: 44px;border:none;border-radius: initial;background:#8dc21f ;}
          .span-img{width:15px;height: 15px;display: inline-block;}
          .span-img>img{width:100%;display:block}
           </style>
	<body>
		<header id="header" class="mui-bar mui-bar-nav">
		<i class="mui-icon mui-icon-back mui-action-back"></i>
		<h1 class="mui-title ">购物车</h1>
		<span class="mui-pull-right deleteBtn" style="line-height: 44px;font-size:15px">删除</span>
	</header> 
	<nav class="mui-bar mui-bar-footer" style="padding-right:0 ;">
		<div class="mui-input-row mui-checkbox mui-left bot-but">
			<input name="checkbox" value="" type="checkbox" id="SelectAll">
		</div>
		<div class="quanx">全选</div>
		<div class="bot-two">
			<p style="margin-top: 3px;" class="totalgoods">共计商品：0</p>
			<p>总金额数：<span style="color:#8dc21f" class="zongji">¥00.00</span></p>
		</div>
		<button type="button" class="mui-btn payGoods">完善订单</button><!-- onclick="openNewpage('shop-quer.html')"-->
	</nav>
		<div class="mui-content" id="content">
		    <!--<ul class="mui-table-view boot-one">
		        <li class="mui-table-view-cell mui-media">
		        	<div class="mui-input-row mui-checkbox mui-left">
						<input name="checkbox" value="" type="checkbox" class="aa">
					</div>
		            <a href="javascript:;">
		                <img class="mui-media-object mui-pull-left" src="../images/iconic.png">
		                <div class="mui-media-body">
		                    <span>党参</span><span class="span-img mui-pull-right"><img src="../images/shanc.png"/></span>
		                    
		                    <p class="mui-ellipsis first-p"><span>¥10:00/g</span> </p>
		                    <div class="mui-numbox" data-numbox-min='0' data-numbox-max='100'>
								<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								<input class="mui-input-numbox" type="number" />
								<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
							</div>
		                </div>
		            </a>
		        </li>
		    </ul>-->
		</div>
		
        
		<script type="text/javascript">
			mui.init();
			$("#SelectAll").on('click', function() {
				if(this.checked){
					jQuery("#SelectAll").prop("checked",true);
					jQuery("#content :checkbox").prop("checked",true);
					reckon();
				}else{
					jQuery("#SelectAll").prop("checked",false);
					jQuery("#content :checkbox").prop("checked",false);
					reckon();
				}
			})
			//改变总价
			function reckon(){
				//获取选中的商品id
				var nums = price = "";
				var zongji = 0;
				var len = 0;
				$("#content input[type='checkbox']:checked").each(function(){
					price +=$(this).attr('data-price')+ ',';
					nums += $('#num'+$(this).attr('pid')).val() + ',';
					len += parseInt($('#num'+$(this).attr('pid')).val());
				})
				var list='';
				var num  = nums.split(',');
				var pri  = price.split(',');
				//计算商品总数
				for(var i = 0;i<num.length-1;i++){
					zongji += parseInt(pri[i])*parseInt(num[i]);
				}
				$('.totalgoods').text('共计商品：'+len);
				$('.zongji').text('¥'+zongji.toFixed(2));
			}
		</script>
	</body>

</html>